<template>
  <!-- 歌单详情页头部区域 -->
  <Top :playlist="state.playlist"></Top>
  <!-- 歌单详情页底部歌曲列表区域 -->
  <List :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount"></List>
</template>

<script>
import { useRoute } from 'vue-router'
import { getMusics, getMusicsList } from '@/api/musics.js'
import { reactive, onMounted, provide } from 'vue'
import Top from '@/components/musics/Top.vue'
import List from '@/components/musics/List.vue'
export default {
  name: 'Musics',
  components: {
    Top,
    List
  },
  setup() {
    // 定义歌单详情页、以及歌单歌曲数据
    const state = reactive({ playlist: {}, itemList: [] })
    const route = useRoute()
    onMounted(async () => {
      // 接收传过来的歌单ID，请求对应歌单详情数据
      const { data: res } = await getMusics(route.query.id)
      if (res.code !== 200) {
        Toast.fail('获取推荐歌单详情失败')
      }
      state.playlist = res.playlist

      // 请求歌单详情的歌曲数据
      const { data: res1 } = await getMusicsList({ id: route.query.id, limit: 10, offset: 0 })
      if (res1.code !== 200) {
        Toast.fail('获取推荐歌单歌曲失败')
      }
      state.itemList = res1.songs

      // 防止Top组件渲染时传输的数据还未完成导致报错，所以把传输的数据存一份在本地
      sessionStorage.setItem('itemDetail', JSON.stringify(state))
    })
    // 利用provide传值给Top组件
    // provide('itemList', state)

    // 返回数据出去
    return { state }
  }
}
</script>

<style lang="less" scoped>
</style>